<script setup>
import { ref, onMounted } from 'vue';
import { RouterLink } from 'vue-router';
import resourceService from '@/services/resourceService.js';
import { userManager } from '@/utils/user.js';
import { ElSkeleton, ElEmpty, ElIcon, ElTag, ElImage } from 'element-plus';
import { Coin, User } from '@element-plus/icons-vue';

const recommendations = ref([]);
const loading = ref(true);
const error = ref(null);

const difficultyMap = {
  0: { text: '入门', type: 'success' },
  1: { text: '初级', type: 'primary' },
  2: { text: '中级', type: 'warning' },
  3: { text: '高级', type: 'danger' },
  4: { text: '专家', type: 'danger' }
};

function getDifficulty(value) {
  return difficultyMap[value] || { text: '未知', type: 'info' };
}

onMounted(async () => {
  const userId = userManager.getUserId();

  if (!userId) {
    loading.value = false;
    error.value = "请先登录以查看个性化推荐";
    return;
  }

  try {
    const response = await resourceService.getPersonalizedRecommendations(userId, { page: 1, size: 3 });
    if (response.success && response.data.records.length > 0) {
      recommendations.value = response.data.records;
    } else {
      error.value = "暂无适合您的推荐，多去浏览学习资源吧！";
    }
  } catch (err) {
    console.error("获取推荐列表失败:", err);
    error.value = "加载推荐失败，请稍后重试";
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <!-- 【修改】模板结构保持不变，但容器类名更新 -->
  <div class="recommend-container">
    <h3 class="recommend-header">
      个性化推荐
    </h3>
    <div class="recommend-content">
      <el-skeleton v-if="loading" style="padding: 15px;" animated>
        <template #template>
          <el-skeleton-item variant="image" style="width: 100%; height: 120px; border-radius: 8px; margin-bottom: 10px;" />
          <el-skeleton-item variant="p" style="width: 60%;" />
          <el-skeleton-item variant="text" style="width: 80%; margin-top: 8px;" />
        </template>
      </el-skeleton>

      <el-empty v-else-if="error" :description="error" :image-size="60" />

      <div v-else class="card-list">
        <router-link v-for="item in recommendations" :key="item.id" :to="`/resource/${item.id}`" class="card-link">
          <div class="recommend-card">
            <div class="card-image-wrapper">
              <el-image :src="item.coverImage" fit="cover" class="card-image">
                <template #error>
                  <div class="image-placeholder"></div>
                </template>
              </el-image>
            </div>
            <div class="card-info">
              <p class="card-title">{{ item.title }}</p>
              <div class="card-footer">
                <span class="author">
                  <el-icon><User /></el-icon>
                  {{ item.publisherName || '匿名' }}
                </span>
                <el-tag :type="getDifficulty(item.difficulty).type" size="small" effect="light" round>
                  {{ getDifficulty(item.difficulty).text }}
                </el-tag>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.recommend-container {
  /* 将这里的颜色值修改为浅灰色 */
  background-color: #f8f9fa; /* 一种浅灰色，您可以根据需要调整 */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.recommend-header {
  font-size: 20px;
  font-weight: 600;
  color: #333; /* 标题颜色也调整为深色，以适应浅灰色背景 */
  padding: 12px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid #e9ecef; /* 可以添加一个底边框，与浅灰色背景形成对比 */
}

.recommend-content {
  flex-grow: 1;
  padding: 0 20px 20px 20px;
}

:deep(.el-empty__description p),
:deep(.el-skeleton) {
  color: #888; /* 空状态和骨架屏文字颜色也调整为深色 */
}
:deep(.el-skeleton__item) {
  background: #eee;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-link {
  text-decoration: none;
}

.recommend-card {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  border: 1px solid #e9ecef;
}

.recommend-card:hover {
  /* transform: scale(1.01); */
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.card-image-wrapper {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.card-info {
  flex-grow: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
}

.author {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>